<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title></title>
    <link rel="stylesheet" href="/css/wmd.css" type="text/css" />
  </head>
  <body>

      <div>
          <div>
              <h1>{$article.title}</h1>
              <div>{$article.content}</div>
              <p>
                  {foreach from=$article.tags name=tags item=tag}
                  <a href="/article/tag/{$tag}">{$tag}</a>
                  {/foreach}
              </p>

              {if $article.review_num > 0}
              <div>
                  <h3>{$article.review_num} Reviews</h3>
                  {foreach from=$article.reviews.result name=review item=review}
                  <div>
                      <hr />
                      <img src="{$review.user_avatar}" />{$review.user_name} {$review.create_time}
                      <a href="/review/edit/{$review.id}">编辑</a>
                      {$review.content}
                      <div id="review_{$review.id}_comments">
                      {if $review.comment_num > 0}
                      {foreach from=$review.comments.result name=comment item=comment}
                      <div>
                          {$comment.content}
                          {$comment.create_time}
                          <img alt="{$comment.user_name}" src="{$comment.user_avatar}" />
                          {$comment.user_name}
                      </div>
                      {/foreach}
                      {/if}
                       </div>
                      <div><a class="add_comment" rel="{$review.id}" href="javascript:void(0)">Add Comment</a></div>
                  </div>
                  {/foreach}
              </div>
              {/if}
          </div>
      </div>

      <div id="add_review">
          <h3>添加评论</h3>
          <form method="post" action="/article/detail/{$article.id}#add_review">
              <input type="hidden" name="pid" value="{$article.id}" />
              {if !$is_login}
              <b>{$review_error.account}</b>
              <table>
                  <tr>
                      <th>邮箱</th>
                      <td><input type="text" name="email" value="{$review_user.email}" /><span>{$review_error.email}</span></td>
                      <th>称呼</th>
                      <td><input type="text" name="name" value="{$review_user.name}" /><span>{$review_error.name}</span></td>
                      <th>记住我</th>
                      <td><input type="checkbox" name="remember_me" /></td>
                  </tr>
              </table>
              {/if}
              <div class="wmd-editor">
                  <div id="wmd-button-bar"></div>
                  <textarea name="content" id="wmd-input" rows="8">{$review_post.content}</textarea>
                  <div id="wmd-preview" class="wmd-preview"></div>
                  <span>{$review_error.content}</span>
              </div>

              <div><button type="submit">提交</button></div>
          </form>
      </div>


    
      <script type="text/javascript" src="/js/jquery.min.js"></script>
      <script type="text/javascript" src="/js/wmd.js"></script>
      <script type="text/javascript" src="/js/showdown.js"></script>
      <script type="text/javascript" src="/js/prettify.js"></script>
      <script type="text/javascript">
			(function($) {
				var f = $;
				var i,
				g;
				var c = 0;
				var h = 32;
				var b;
				f.fn.TextAreaResizer = function() {
					return this.each(function() {
						i = f(this);
						g = null;
						var drag = f('<div class="grippie"></div>').bind("mousedown", {
							el: this
						},
						j);
						drag.insertAfter(f(this));
						//f(this).parent().append();
						var k = f("div.grippie", f(this).parent())[0];
						k.style.marginRight = (k.offsetWidth - f(this)[0].offsetWidth) + "px"
					})
				};
				function j(k) {
					i = f(k.data.el);
					i.blur();
					c = d(k).y;
					g = i.height() - c;
					i.css("opacity", 0.25);
					f(document).mousemove(e).mouseup(a);
					return false
				}
				function e(m) {
					var k = d(m).y;
					var l = g + k;
					if (c >= (k)) {
						l -= 5
					}
					c = k;
					l = Math.max(h, l);
					i.height(l + "px");
					if (l < h) {
						a(m)
					}
					return false
				}
				function a(k) {
					f(document).unbind("mousemove", e).unbind("mouseup", a);
					i.css("opacity", 1);
					i.focus();
					i = null;
					g = null;
					c = 0
				}
				function d(k) {
					return {
						x: k.clientX + document.documentElement.scrollLeft,
						y: k.clientY + document.documentElement.scrollTop
					}
				}

				//highlight
                prettyPrint();

				setup_wmd({
					input: "wmd-input",
					button_bar: "wmd-button-bar",
					preview: "wmd-preview"
					//output: "wmd-copy_html"
				});

				$('#wmd-input').TextAreaResizer();


				$.fn.insertAtCaret = function (myValue) {
						return this.each(function(){
								//IE support
								if (document.selection) {
										this.focus();
										sel = document.selection.createRange();
										sel.text = myValue;
										this.focus();
								}
								//MOZILLA/NETSCAPE support
								else if (this.selectionStart || this.selectionStart == '0') {
										var startPos = this.selectionStart;
										var endPos = this.selectionEnd;
										var scrollTop = this.scrollTop;
										this.value = this.value.substring(0, startPos)
													  + myValue
											  + this.value.substring(endPos, this.value.length);
										this.focus();
										this.selectionStart = startPos + myValue.length;
										this.selectionEnd = startPos + myValue.length;
										this.scrollTop = scrollTop;
								} else {
										this.value += myValue;
										this.focus();
								}
						});

				};

                window.is_login = '{$is_login}';
                var comment_html;
                var user_html = '<table><tr><th>邮箱</th><td><input type="text" name="email" /></td><th>称呼</th><td><input type="text" name="name"  /></td><th>记住我</th><td><input type="checkbox" name="remember_me" /></td></tr></table>';

                $('.add_comment').each(function(i){
                    $(this).unbind('click').click(function(){
                        var id = 'cmt'+i;
                        var pid = $(this).attr('rel');
                        if( $('#'+id).html())
                        {
                            $('#'+id).remove();
                            comment_html = null;
                            return;
                        }
                        
                        if(comment_html)
                        {
                            comment_html.remove();
                            comment_html = null;
                        }

                        if(is_login)
                        {
                            user_html = '';
                        }

                        comment_html = $('<div id="'+id+'">'+user_html+'<textarea></textarea><button type="button">提交</button></div>');
                        $(this).parent().append(comment_html);
                        var obj_id = $('#'+id);
                        obj_id.find('button').unbind('click').click(function(){
                            var content = $.trim(obj_id.find('textarea').val());
                            var userinfo = '';
                            if(!is_login)
                            {
                                var user_email = obj_id.find("input[name='email']").val();
                                var user_name = obj_id.find("input[name='name']").val();
                                var remember_me = obj_id.find("input[name='remember_me']").val();
                                userinfo = '&email='+encodeURIComponent(user_email)+'&name='+encodeURIComponent(user_name)+'&remember_me='+encodeURIComponent(remember_me);
                            }

                            $.ajax({
                                type:'POST',
                                url:'/comment/add',
                                data: 'pid='+pid+'&content='+encodeURIComponent(content)+userinfo+'&'+new Date().getTime(),
                                success:function(msg){
                                    var result = $.parseJSON( msg );
                                    if(result.success == 1)
                                    {
                                        window.is_login = true;
                                        obj_id.remove();
                                        $('#review_'+pid+'_comments').append($(result.message));
                                    }
                                    else
                                    {
                                        //Site.processErrors(result);
                                        alert(result.message);
                                    }
                                }
                            });
                        });
                    });
                });

			})(jQuery);
      </script>
  </body>
</html>
